<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>学员中心 - 乒乓球培训管理系统</title>
  <link rel="stylesheet" href="../assets/css/common.css">
  <style>
    .profile-header {
      background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
      color: white;
      padding: 24px;
      border-radius: 8px;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .profile-avatar {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
    }

    .profile-info h2 {
      margin: 0 0 8px 0;
      font-size: 24px;
    }

    .profile-info p {
      margin: 4px 0;
      opacity: 0.9;
    }

    .balance-card {
      background: white;
      border: 2px solid var(--primary-color);
      border-radius: 8px;
      padding: 20px;
      text-align: center;
      margin-left: auto;
      min-width: 200px;
    }

    .balance-amount {
      font-size: 28px;
      font-weight: bold;
      color: var(--primary-color);
      margin-bottom: 8px;
    }

    .balance-label {
      font-size: 14px;
      color: var(--text-muted);
    }

    .coach-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 20px;
    }

    .coach-card {
      background: white;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 20px;
      transition: all 0.3s ease;
    }

    .coach-card:hover {
      box-shadow: var(--shadow);
      transform: translateY(-2px);
    }

    .coach-card-header {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 16px;
    }

    .coach-avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: var(--bg-light);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
    }

    .coach-name {
      font-size: 18px;
      font-weight: 600;
      margin: 0 0 4px 0;
    }

    .coach-level {
      font-size: 14px;
      padding: 2px 8px;
      border-radius: 12px;
      background: var(--primary-color);
      color: white;
    }

    .coach-info {
      margin-bottom: 16px;
    }

    .coach-info p {
      margin: 4px 0;
      font-size: 14px;
      color: var(--text-secondary);
    }

    .coach-achievements {
      background: var(--bg-light);
      padding: 12px;
      border-radius: 6px;
      margin-bottom: 16px;
    }

    .coach-achievements h5 {
      margin: 0 0 8px 0;
      font-size: 14px;
      font-weight: 600;
    }

    .coach-achievements p {
      margin: 0;
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 1.4;
    }

    .coach-actions {
      display: flex;
      gap: 8px;
    }

    .search-filters {
      background: white;
      padding: 20px;
      border-radius: 8px;
      margin-bottom: 20px;
      box-shadow: var(--shadow);
    }

    .filter-row {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr auto;
      gap: 16px;
      align-items: end;
    }

    .booking-calendar {
      background: white;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: var(--shadow);
    }

    .calendar-header {
      background: var(--primary-color);
      color: white;
      padding: 16px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .calendar-nav {
      display: flex;
      gap: 12px;
    }

    .calendar-nav button {
      background: rgba(255, 255, 255, 0.2);
      border: none;
      color: white;
      padding: 8px 12px;
      border-radius: 4px;
      cursor: pointer;
    }

    .calendar-nav button:hover {
      background: rgba(255, 255, 255, 0.3);
    }

    .time-slots {
      display: grid;
      grid-template-columns: auto repeat(7, 1fr);
      gap: 1px;
      background: var(--border-color);
    }

    .time-slot {
      background: white;
      padding: 12px 8px;
      text-align: center;
      font-size: 12px;
      min-height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .time-label {
      background: var(--bg-light);
      font-weight: 600;
    }

    .slot-available {
      cursor: pointer;
      transition: background-color 0.2s;
    }

    .slot-available:hover {
      background: #fff5e6;
    }

    .slot-booked {
      background: #f0f0f0;
      color: var(--text-muted);
    }

    .slot-selected {
      background: var(--primary-color);
      color: white;
    }

    .my-coaches {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 16px;
      margin-bottom: 24px;
    }

    .my-coach-card {
      background: white;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 16px;
    }

    .my-coach-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
    }

    .my-coach-avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: var(--bg-light);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
    }

    .competition-card {
      background: white;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 20px;
    }

    .competition-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
    }

    .competition-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }

    .competition-date {
      color: var(--text-muted);
      font-size: 14px;
    }

    .group-selection {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-bottom: 16px;
    }

    .group-option {
      border: 2px solid var(--border-color);
      border-radius: 8px;
      padding: 16px;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .group-option:hover {
      border-color: var(--primary-color);
    }

    .group-option.selected {
      border-color: var(--primary-color);
      background: #fff5e6;
    }

    .group-name {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 4px;
    }

    .group-desc {
      font-size: 12px;
      color: var(--text-muted);
    }

    .review-form {
      background: white;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 20px;
    }

    .star-rating {
      display: flex;
      gap: 4px;
      margin-bottom: 16px;
    }

    .star {
      font-size: 24px;
      color: #ddd;
      cursor: pointer;
      transition: color 0.2s;
    }

    .star.active,
    .star:hover {
      color: #ffa500;
    }

    .message-item {
      background: white;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 16px;
      margin-bottom: 12px;
    }

    .message-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
    }

    .message-title {
      font-weight: 600;
      margin: 0;
    }

    .message-time {
      font-size: 12px;
      color: var(--text-muted);
    }

    .message-content {
      color: var(--text-secondary);
      font-size: 14px;
      line-height: 1.4;
    }
  </style>
</head>
<body>
  <div class="container">
    <!-- 个人资料头部 -->
    <div class="profile-header">
      <div class="profile-avatar">👨‍🎓</div>
      <div class="profile-info">
        <h2>张小明</h2>
        <p>中心校区 · 男 · 16岁</p>
        <p>手机：138-0000-1001 · 邮箱：student1@example.com</p>
        <p>教练：李教练、王教练 (2/2)</p>
      </div>
      <div class="balance-card">
        <div class="balance-amount">¥568.50</div>
        <div class="balance-label">账户余额</div>
        <button class="btn btn-primary btn-sm mt-1" onclick="showRechargeModal()">充值</button>
      </div>
    </div>

    <!-- 功能标签页 -->
    <div class="tab-container">
      <div class="tab-header">
        <button class="tab-btn active" onclick="switchTab('dashboard')">个人中心</button>
        <button class="tab-btn" onclick="switchTab('coaches')">教练查询</button>
        <button class="tab-btn" onclick="switchTab('booking')">课程预约</button>
        <button class="tab-btn" onclick="switchTab('review')">训练评价</button>
        <button class="tab-btn" onclick="switchTab('competition')">月赛报名</button>
        <button class="tab-btn" onclick="switchTab('message')">消息中心</button>
      </div>

      <!-- 个人中心 -->
      <div id="dashboardTab" class="tab-content tab-pane active">
        <div class="row">
          <div class="col-8">
            <div class="card">
              <div class="card-header">我的教练</div>
              <div class="card-body">
                <div class="my-coaches" id="myCoaches"></div>
                <button class="btn btn-primary" onclick="switchTab('coaches')">查找更多教练</button>
              </div>
            </div>
          </div>
          <div class="col-4">
            <div class="card">
              <div class="card-header">近期课程</div>
              <div class="card-body">
                <div id="upcomingClasses"></div>
              </div>
            </div>
            <div class="card mt-2">
              <div class="card-header">训练统计</div>
              <div class="card-body">
                <div id="trainingStats"></div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 教练查询 -->
      <div id="coachesTab" class="tab-content tab-pane">
        <div class="search-filters">
          <div class="filter-row">
            <div class="form-group">
              <label class="form-label">教练姓名</label>
              <input type="text" class="form-control" id="coachNameFilter" placeholder="输入教练姓名">
            </div>
            <div class="form-group">
              <label class="form-label">性别</label>
              <select class="form-control form-select" id="coachGenderFilter">
                <option value="">不限</option>
                <option value="male">男</option>
                <option value="female">女</option>
              </select>
            </div>
            <div class="form-group">
              <label class="form-label">年龄范围</label>
              <select class="form-control form-select" id="coachAgeFilter">
                <option value="">不限</option>
                <option value="20-30">20-30岁</option>
                <option value="30-40">30-40岁</option>
                <option value="40-50">40-50岁</option>
              </select>
            </div>
            <button class="btn btn-primary" onclick="searchCoaches()">搜索</button>
          </div>
        </div>
        <div class="coach-grid" id="coachGrid"></div>
      </div>

      <!-- 课程预约 -->
      <div id="bookingTab" class="tab-content tab-pane">
        <div class="row">
          <div class="col-3">
            <div class="card">
              <div class="card-header">选择教练</div>
              <div class="card-body">
                <div id="coachSelector"></div>
              </div>
            </div>
          </div>
          <div class="col-9">
            <div class="booking-calendar">
              <div class="calendar-header">
                <h3 style="margin: 0;">课程预约</h3>
                <div class="calendar-nav">
                  <button onclick="previousWeek()">← 上周</button>
                  <span id="currentWeek">2024年1月15日 - 1月21日</span>
                  <button onclick="nextWeek()">下周 →</button>
                </div>
              </div>
              <div class="time-slots" id="timeSlots"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 训练评价 -->
      <div id="reviewTab" class="tab-content tab-pane">
        <div class="review-form">
          <h3>课程评价</h3>
          <div class="form-group">
            <label class="form-label">选择课程</label>
            <select class="form-control form-select" id="reviewCourseSelect">
              <option value="">请选择已完成的课程</option>
              <option value="1">2024-01-14 15:00 李教练 (球台1)</option>
              <option value="2">2024-01-13 10:00 王教练 (球台2)</option>
            </select>
          </div>
          <div class="form-group">
            <label class="form-label">课程评分</label>
            <div class="star-rating" id="starRating">
              <span class="star" onclick="setRating(1)">★</span>
              <span class="star" onclick="setRating(2)">★</span>
              <span class="star" onclick="setRating(3)">★</span>
              <span class="star" onclick="setRating(4)">★</span>
              <span class="star" onclick="setRating(5)">★</span>
            </div>
          </div>
          <div class="form-group">
            <label class="form-label">训练收获</label>
            <textarea class="form-control" rows="4" placeholder="请分享您的训练收获和心得..."></textarea>
          </div>
          <div class="form-group">
            <label class="form-label">需要改进的地方</label>
            <textarea class="form-control" rows="3" placeholder="请描述需要改进的技术要点..."></textarea>
          </div>
          <button class="btn btn-primary" onclick="submitReview()">提交评价</button>
        </div>

        <div class="card">
          <div class="card-header">历史评价</div>
          <div class="card-body">
            <div id="reviewHistory"></div>
          </div>
        </div>
      </div>

      <!-- 月赛报名 -->
      <div id="competitionTab" class="tab-content tab-pane">
        <div class="competition-card">
          <div class="competition-header">
            <div>
              <h3 class="competition-title">🏆 2024年1月月赛</h3>
              <div class="competition-date">比赛时间：2024年1月28日（周日）9:00-17:00</div>
            </div>
            <div class="text-right">
              <div class="text-muted">报名费：¥30</div>
              <div class="text-muted">报名截止：1月25日</div>
            </div>
          </div>

          <div class="form-group">
            <label class="form-label">选择组别</label>
            <div class="group-selection">
              <div class="group-option" onclick="selectGroup('A')">
                <div class="group-name">甲组</div>
                <div class="group-desc">高水平组</div>
                <div class="text-muted mt-1">已报名：8人</div>
              </div>
              <div class="group-option selected" onclick="selectGroup('B')">
                <div class="group-name">乙组</div>
                <div class="group-desc">中等水平组</div>
                <div class="text-muted mt-1">已报名：12人</div>
              </div>
              <div class="group-option" onclick="selectGroup('C')">
                <div class="group-name">丙组</div>
                <div class="group-desc">入门级组</div>
                <div class="text-muted mt-1">已报名：15人</div>
              </div>
            </div>
          </div>

          <div class="form-group">
            <label class="form-label">报名说明</label>
            <textarea class="form-control" rows="3" placeholder="请简单介绍您的乒乓球水平和参赛经验..."></textarea>
          </div>

          <button class="btn btn-primary btn-lg" onclick="enrollCompetition()">立即报名 (¥30)</button>
        </div>

        <div class="card">
          <div class="card-header">我的比赛</div>
          <div class="card-body">
            <div id="myCompetitions"></div>
          </div>
        </div>
      </div>

      <!-- 消息中心 -->
      <div id="messageTab" class="tab-content tab-pane">
        <div id="messageList"></div>
      </div>
    </div>
  </div>

  <!-- 充值模态框 -->
  <div id="rechargeModal" class="modal-overlay" style="display: none;">
    <div class="modal">
      <div class="modal-header">
        <h3 class="modal-title">账户充值</h3>
        <button class="modal-close" onclick="hideRechargeModal()">&times;</button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label class="form-label">充值金额</label>
          <div class="row">
            <div class="col-6">
              <input type="number" class="form-control" id="rechargeAmount" placeholder="请输入金额" min="1" step="0.01">
            </div>
            <div class="col-6">
              <div style="display: flex; gap: 8px; flex-wrap: wrap;">
                <button class="btn btn-secondary btn-sm" onclick="setAmount(100)">¥100</button>
                <button class="btn btn-secondary btn-sm" onclick="setAmount(200)">¥200</button>
                <button class="btn btn-secondary btn-sm" onclick="setAmount(500)">¥500</button>
              </div>
            </div>
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">支付方式</label>
          <div class="row">
            <div class="col-6">
              <button class="btn btn-success" onclick="payWithWechat()">微信支付</button>
            </div>
            <div class="col-6">
              <button class="btn btn-primary" onclick="payWithAlipay()">支付宝</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="../assets/js/common.js"></script>
  <script>
    // 模拟数据
    const myCoaches = [
      { id: '1', name: '李教练', level: '中级教练', avatar: '👨‍🏫', rate: 150, students: 15 },
      { id: '2', name: '王教练', level: '高级教练', avatar: '👩‍🏫', rate: 200, students: 18 }
    ];

    const allCoaches = [
      {
        id: '1', name: '李教练', gender: 'male', age: 28, level: '中级教练', 
        rate: 150, avatar: '👨‍🏫', students: 15, maxStudents: 20,
        achievements: '2022年市级比赛第二名，2023年省级比赛第五名，有5年教学经验'
      },
      {
        id: '2', name: '王教练', gender: 'female', age: 25, level: '高级教练',
        rate: 200, avatar: '👩‍🏫', students: 18, maxStudents: 20,
        achievements: '国家二级运动员，曾获全国青少年比赛冠军，专业教学8年'
      },
      {
        id: '3', name: '张教练', gender: 'male', age: 35, level: '高级教练',
        rate: 200, avatar: '👨‍🏫', students: 12, maxStudents: 20,
        achievements: '前国家队队员，多次获得国际比赛奖项，教学经验丰富'
      },
      {
        id: '4', name: '赵教练', gender: 'female', age: 30, level: '初级教练',
        rate: 80, avatar: '👩‍🏫', students: 8, maxStudents: 20,
        achievements: '体育学院毕业，专业基础扎实，善于指导初学者'
      }
    ];

    const upcomingClasses = [
      { date: '2024-01-16', time: '15:00-16:00', coach: '李教练', table: '球台1' },
      { date: '2024-01-18', time: '10:00-11:00', coach: '王教练', table: '球台2' },
      { date: '2024-01-20', time: '14:00-15:00', coach: '李教练', table: '球台1' }
    ];

    const messages = [
      {
        id: '1', title: '预约确认', content: '您预约的李教练课程已确认，时间：2024-01-16 15:00',
        time: '2024-01-15 14:30:00', type: '预约通知'
      },
      {
        id: '2', title: '余额变动', content: '账户充值成功，金额：¥200.00',
        time: '2024-01-15 10:15:00', type: '财务通知'
      },
      {
        id: '3', title: '月赛通知', content: '1月月赛报名开始，截止时间：1月25日',
        time: '2024-01-15 09:00:00', type: '比赛通知'
      }
    ];

    let selectedRating = 0;
    let selectedGroup = 'B';

    function switchTab(tabName) {
      // 切换标签按钮状态
      document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
      document.querySelector(`.tab-btn[onclick="switchTab('${tabName}')"]`).classList.add('active');

      // 切换内容面板
      document.querySelectorAll('.tab-pane').forEach(pane => pane.classList.remove('active'));
      document.getElementById(tabName + 'Tab').classList.add('active');

      // 加载对应数据
      switch(tabName) {
        case 'dashboard':
          loadDashboard();
          break;
        case 'coaches':
          loadCoaches();
          break;
        case 'booking':
          loadBooking();
          break;
        case 'review':
          loadReviews();
          break;
        case 'competition':
          loadCompetition();
          break;
        case 'message':
          loadMessages();
          break;
      }
    }

    function loadDashboard() {
      // 我的教练
      const coachesHtml = myCoaches.map(coach => `
        <div class="my-coach-card">
          <div class="my-coach-header">
            <div class="my-coach-avatar">${coach.avatar}</div>
            <div>
              <h4 style="margin: 0 0 4px 0;">${coach.name}</h4>
              <div class="coach-level">${coach.level}</div>
            </div>
          </div>
          <p style="margin: 8px 0 0 0; font-size: 12px; color: #666;">
            ¥${coach.rate}/小时 · 学员：${coach.students}/20
          </p>
          <button class="btn btn-primary btn-sm mt-1" onclick="bookWithCoach('${coach.id}')">立即预约</button>
        </div>
      `).join('');
      document.getElementById('myCoaches').innerHTML = coachesHtml;

      // 近期课程
      const classesHtml = upcomingClasses.map(cls => `
        <div style="padding: 8px 0; border-bottom: 1px solid #eee;">
          <div style="font-weight: 500;">${cls.date} ${cls.time}</div>
          <div style="font-size: 12px; color: #666;">
            ${cls.coach} · ${cls.table}
          </div>
        </div>
      `).join('');
      document.getElementById('upcomingClasses').innerHTML = classesHtml;

      // 训练统计
      const statsHtml = `
        <div style="display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #eee;">
          <span>本月课程</span>
          <span class="text-primary">8节</span>
        </div>
        <div style="display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #eee;">
          <span>累计课程</span>
          <span class="text-primary">45节</span>
        </div>
        <div style="display: flex; justify-content: space-between; padding: 8px 0;">
          <span>本月消费</span>
          <span class="text-primary">¥1,200.00</span>
        </div>
      `;
      document.getElementById('trainingStats').innerHTML = statsHtml;
    }

    function loadCoaches() {
      const coachesHtml = allCoaches.map(coach => `
        <div class="coach-card">
          <div class="coach-card-header">
            <div class="coach-avatar">${coach.avatar}</div>
            <div style="flex: 1;">
              <h3 class="coach-name">${coach.name}</h3>
              <span class="coach-level">${coach.level}</span>
            </div>
          </div>
          <div class="coach-info">
            <p>性别：${coach.gender === 'male' ? '男' : '女'} · 年龄：${coach.age}岁</p>
            <p>收费：¥${coach.rate}/小时</p>
            <p>学员：${coach.students}/${coach.maxStudents}</p>
          </div>
          <div class="coach-achievements">
            <h5>比赛成绩</h5>
            <p>${coach.achievements}</p>
          </div>
          <div class="coach-actions">
            <button class="btn btn-primary" onclick="selectCoach('${coach.id}')">选择教练</button>
            <button class="btn btn-secondary" onclick="viewCoachDetail('${coach.id}')">查看详情</button>
          </div>
        </div>
      `).join('');
      document.getElementById('coachGrid').innerHTML = coachesHtml;
    }

    function loadBooking() {
      // 教练选择器
      const selectorHtml = myCoaches.map(coach => `
        <div style="padding: 12px; border: 1px solid #eee; border-radius: 6px; margin-bottom: 8px; cursor: pointer;" onclick="selectBookingCoach('${coach.id}')">
          <div style="display: flex; align-items: center; gap: 8px;">
            <span>${coach.avatar}</span>
            <div>
              <div style="font-weight: 500;">${coach.name}</div>
              <div style="font-size: 12px; color: #666;">¥${coach.rate}/小时</div>
            </div>
          </div>
        </div>
      `).join('');
      document.getElementById('coachSelector').innerHTML = selectorHtml;

      // 时间表格
      generateTimeSlots();
    }

    function generateTimeSlots() {
      const times = ['09:00', '10:00', '11:00', '14:00', '15:00', '16:00', '17:00', '18:00'];
      const days = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
      
      let html = '<div class="time-slot time-label">时间</div>';
      days.forEach(day => {
        html += `<div class="time-slot time-label">${day}</div>`;
      });

      times.forEach(time => {
        html += `<div class="time-slot time-label">${time}</div>`;
        for (let i = 0; i < 7; i++) {
          const isAvailable = Math.random() > 0.3;
          const slotClass = isAvailable ? 'slot-available' : 'slot-booked';
          html += `<div class="time-slot ${slotClass}" onclick="${isAvailable ? `selectTimeSlot(this, '${time}', ${i})` : ''}">${isAvailable ? '可预约' : '已预约'}</div>`;
        }
      });

      document.getElementById('timeSlots').innerHTML = html;
    }

    function selectTimeSlot(element, time, dayIndex) {
      // 清除之前的选择
      document.querySelectorAll('.slot-selected').forEach(el => {
        el.classList.remove('slot-selected');
        el.classList.add('slot-available');
      });
      
      // 选择当前时间段
      element.classList.remove('slot-available');
      element.classList.add('slot-selected');
      
      // 显示预约确认
      Utils.confirm(`确定要预约这个时间段吗？\n时间：${time}\n费用：¥150`, () => {
        Utils.showMessage('预约成功！等待教练确认', 'success');
        element.textContent = '待确认';
        element.classList.remove('slot-selected');
        element.classList.add('slot-booked');
        element.onclick = null;
      });
    }

    function loadReviews() {
      const reviewsHtml = `
        <div style="border: 1px solid #eee; border-radius: 6px; padding: 16px; margin-bottom: 12px;">
          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
            <strong>2024-01-14 李教练</strong>
            <div style="color: #ffa500;">★★★★★</div>
          </div>
          <p style="margin: 0; font-size: 14px; color: #666;">训练收获：今天练习了发球技术，李教练指导很细致，发球的准确度有明显提升。</p>
        </div>
        <div style="border: 1px solid #eee; border-radius: 6px; padding: 16px; margin-bottom: 12px;">
          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
            <strong>2024-01-13 王教练</strong>
            <div style="color: #ffa500;">★★★★☆</div>
          </div>
          <p style="margin: 0; font-size: 14px; color: #666;">训练收获：学习了反手攻球技术，还需要多加练习才能熟练掌握。</p>
        </div>
      `;
      document.getElementById('reviewHistory').innerHTML = reviewsHtml;
    }

    function loadCompetition() {
      const competitionsHtml = `
        <div style="border: 1px solid #eee; border-radius: 6px; padding: 16px;">
          <div style="display: flex; justify-content: space-between; align-items: center;">
            <div>
              <strong>2024年1月月赛 - 乙组</strong>
              <div style="font-size: 12px; color: #666; margin-top: 4px;">报名时间：2024-01-15 10:30:00</div>
            </div>
            <span class="status-badge status-success">已报名</span>
          </div>
          <button class="btn btn-secondary btn-sm mt-1" onclick="viewSchedule()">查看赛程</button>
        </div>
      `;
      document.getElementById('myCompetitions').innerHTML = competitionsHtml;
    }

    function loadMessages() {
      const messagesHtml = messages.map(msg => `
        <div class="message-item">
          <div class="message-header">
            <h4 class="message-title">${msg.title}</h4>
            <span class="message-time">${msg.time}</span>
          </div>
          <div class="message-content">${msg.content}</div>
        </div>
      `).join('');
      document.getElementById('messageList').innerHTML = messagesHtml;
    }

    function setRating(rating) {
      selectedRating = rating;
      const stars = document.querySelectorAll('.star');
      stars.forEach((star, index) => {
        if (index < rating) {
          star.classList.add('active');
        } else {
          star.classList.remove('active');
        }
      });
    }

    function selectGroup(group) {
      selectedGroup = group;
      document.querySelectorAll('.group-option').forEach(option => {
        option.classList.remove('selected');
      });
      event.target.closest('.group-option').classList.add('selected');
    }

    function searchCoaches() {
      Utils.showMessage('搜索功能开发中...', 'info');
    }

    function selectCoach(id) {
      Utils.confirm('确定要选择这位教练吗？', () => {
        Utils.showMessage('已发送双选申请，等待教练确认', 'success');
      });
    }

    function viewCoachDetail(id) {
      const coach = allCoaches.find(c => c.id === id);
      const content = `
        <div style="text-align: center; margin-bottom: 20px;">
          <div style="font-size: 48px; margin-bottom: 8px;">${coach.avatar}</div>
          <h3 style="margin: 0;">${coach.name}</h3>
          <span class="coach-level">${coach.level}</span>
        </div>
        <div style="line-height: 1.8;">
          <p><strong>性别：</strong>${coach.gender === 'male' ? '男' : '女'}</p>
          <p><strong>年龄：</strong>${coach.age}岁</p>
          <p><strong>收费：</strong>¥${coach.rate}/小时</p>
          <p><strong>学员数：</strong>${coach.students}/${coach.maxStudents}</p>
          <p><strong>比赛成绩：</strong></p>
          <p style="background: #f5f5f5; padding: 12px; border-radius: 4px; margin: 0;">${coach.achievements}</p>
        </div>
      `;
      
      const modalId = Modal.create('教练详情', content, [
        { text: '选择教练', class: 'btn-primary', onclick: `selectCoach('${coach.id}')` },
        { text: '关闭', class: 'btn-secondary' }
      ]);
      Modal.show(modalId);
    }

    function bookWithCoach(id) {
      switchTab('booking');
    }

    function selectBookingCoach(id) {
      Utils.showMessage('已选择教练，请选择时间段', 'info');
    }

    function submitReview() {
      if (selectedRating === 0) {
        Utils.showMessage('请先选择评分', 'warning');
        return;
      }
      Utils.showMessage('评价提交成功！', 'success');
      loadReviews();
    }

    function enrollCompetition() {
      Utils.confirm(`确定要报名${selectedGroup}组比赛吗？\n报名费：¥30`, () => {
        Utils.showMessage('报名成功！', 'success');
        loadCompetition();
      });
    }

    function viewSchedule() {
      const content = `
        <div style="text-align: center; margin-bottom: 20px;">
          <h4>乙组赛程安排</h4>
          <p style="color: #666;">2024年1月28日（周日）</p>
        </div>
        <div style="line-height: 2;">
          <div style="padding: 8px; border-bottom: 1px solid #eee;">
            <strong>第一轮 09:00</strong><br>
            张小明 vs 李小红 (球台1)
          </div>
          <div style="padding: 8px; border-bottom: 1px solid #eee;">
            <strong>第二轮 10:00</strong><br>
            张小明 vs 王小刚 (球台2)
          </div>
          <div style="padding: 8px;">
            <strong>第三轮 11:00</strong><br>
            张小明 vs 赵小丽 (球台1)
          </div>
        </div>
      `;
      
      const modalId = Modal.create('比赛赛程', content, [
        { text: '关闭', class: 'btn-secondary' }
      ]);
      Modal.show(modalId);
    }

    function showRechargeModal() {
      document.getElementById('rechargeModal').style.display = 'flex';
    }

    function hideRechargeModal() {
      document.getElementById('rechargeModal').style.display = 'none';
    }

    function setAmount(amount) {
      document.getElementById('rechargeAmount').value = amount;
    }

    function payWithWechat() {
      const amount = document.getElementById('rechargeAmount').value;
      if (!amount) {
        Utils.showMessage('请输入充值金额', 'warning');
        return;
      }
      Utils.showMessage('微信支付功能开发中...', 'info');
      hideRechargeModal();
    }

    function payWithAlipay() {
      const amount = document.getElementById('rechargeAmount').value;
      if (!amount) {
        Utils.showMessage('请输入充值金额', 'warning');
        return;
      }
      Utils.showMessage('支付宝支付功能开发中...', 'info');
      hideRechargeModal();
    }

    function previousWeek() {
      Utils.showMessage('上周课表加载中...', 'info');
    }

    function nextWeek() {
      Utils.showMessage('下周课表加载中...', 'info');
    }

    // 页面加载时初始化
    document.addEventListener('DOMContentLoaded', function() {
      loadDashboard();
    });
  </script>
</body>
</html>
